<template>
  <!-- 用内部的 dialogVisible 控制弹窗，不再直接绑定父组件的 visible prop -->
  <el-dialog 
    v-model="dialogVisible" 
    :title="title" 
    width="350px"
    @close="handleDialogClose" 
    @open="open"
  >
    <el-card class="add-project-card">
       <div class="form-item">
        <label class="form-label">项目名称</label>
        <el-input v-model="projectForm.name" placeholder="输入项目名称"></el-input>
      </div>
      <div class="form-item">
        <label class="form-label">负责人</label>
           <el-select
            v-model="value3"
            multiple
            placeholder="选择成员"
            filterable
            style="width: 240px"
          >
            <el-option
              v-for="item in authors"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
        </el-select>
      </div>
      <div class="form-item">
        <label class="form-label">项目描述</label>
        <el-input
          v-model="projectForm.desc"
          type="textarea"
          placeholder="输入项目描述"
        ></el-input>
      </div>
      <div class="form-item">
        <label class="form-label">开始时间</label>
        <el-date-picker
          v-model="projectForm.startTime"
          type="date"
          placeholder="选择开始时间"
          value-format="YYYY/MM/DD"
        ></el-date-picker>
      </div>
      <div class="form-item">
        <label class="form-label">结束时间</label>
        <el-date-picker
          v-model="projectForm.endTime"
          type="date"
          placeholder="选择结束时间"
          value-format="YYYY/MM/DD"
        ></el-date-picker>
      </div>
      <div class="form-item">
      <label class="form-label">项目标签</label>
       <el-select
      v-model="value"
      multiple
      filterable
      placeholder="选择标签"
      style="width: 240px"
    >
      <el-option
        v-for="item in tags"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
      </div>      
      <div class="form-item">
      <label class="form-label">添加项目成员</label>
       <el-select
      v-model="value2"
      multiple
      placeholder="选择成员"
      filterable
      style="width: 240px"
    >
      <el-option
        v-for="item in memberOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
      </div>      
      <div class="form-item">
        <label class="form-label">项目代码地址</label>
        <el-input
          v-model="projectForm.codeUrl"
          placeholder="输入项目代码地址（gitte、github等等）"
        ></el-input>
      </div>
      <div class="form-item">
        <label class="form-label">联系电话</label>
        <el-input
          v-model="projectForm.phone"
          placeholder="输入电话"
        ></el-input>
      </div>
      <div class="form-item">
        <label class="form-label">项目地址</label>
        <el-input v-model="projectForm.projectUrl" placeholder="输入项目网址"></el-input>
      </div>
      <div class="form-item">
        <label class="form-label">星级</label>
        <el-rate v-model="projectForm.star"  :texts="['1分', '2分', '3分','4分','5分']" allow-half show-text text-color="#ffb400"></el-rate>
      </div>
      <div class="form-item">
        <el-checkbox v-model="projectForm.isPublic">是否公开项目</el-checkbox>
      </div>
      <div class="button-group">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </el-card>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import { 
  ElDialog, ElCard, ElInput, ElDatePicker, 
  ElRate, ElCheckbox, ElButton 
} from 'element-plus';
import ProjectDao from '../../daos/project_dao';

const projectDao = new ProjectDao();

// 1. 接收父组件传递的 visible prop
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title:{
    type:String,
    default:''
  }
});

// 2. 内部响应式变量，用于控制弹窗显示，初始值同步父组件的 visible
const dialogVisible = ref(props.visible); 

// 3. 监听父组件 visible 的变化，实时更新子组件内部的 dialogVisible
watch(() => props.visible, (newVal) => {
    dialogVisible.value = newVal;
});

const handleDialogClose = () =>{
    emit('update:visible',false);
}

// 4. 定义触发更新的事件，让父组件可以响应子组件的关闭操作
const emit = defineEmits(['update:visible']);

const projectForm = ref({
  name: '',
  leader: '',
  desc: '',
  startTime: '',
  endTime: '',
  category: 'frontend',
  relatedArea: '',
  codeUrl: '',
  projectUrl: '',
  star: 0,
  isPublic: false,
});

const value = ref([])
const tags = ref([]);

const value2=ref([])
const memberOptions = ref([]);

const value3 = ref([])
const authors = ref([]);


const fetchMembers = () => {
  projectDao.SelectAllUser() // 调用API
    .then(result => {
      // 清空旧数据
      memberOptions.value = [];
      
      // 处理并添加新数据
      result.data.data.forEach(member => {
        memberOptions.value.push({
          value: member.user_name, // 后端返回的ID
          label: member.user_name
        });
      });
    })
    .catch(error => {
      console.error('获取成员列表失败', error);
      // 可以添加错误提示
    });
};


const fetchMembers2 = () => {
  projectDao.SelectAllTag() // 调用API
    .then(result => {
      // 清空旧数据
      tags.value = [];
      
      // 处理并添加新数据
      result.data.data.forEach(member => {
        tags.value.push({
          value: member.tag_name, // 后端返回的ID
          label: member.tag_name
        });
      });
    })
    .catch(error => {
      console.error('获取标签列表失败', error);
      // 可以添加错误提示
    });
};


const fetchMembers3 = () => {
  projectDao.SelectAllUser() // 调用API
    .then(result => {
      // 清空旧数据
      authors.value = [];
      
      // 处理并添加新数据
      result.data.data.forEach(member => {
        authors.value.push({
          value: member.user_name, // 后端返回的ID
          label: member.user_name
        });
      });
    })
    .catch(error => {
      console.error('获取负责人列表失败', error);
      // 可以添加错误提示
    });
};

const open =()=>{
  fetchMembers();
  fetchMembers2();
  fetchMembers3();
}
const handleConfirm = () => {
  console.log('提交的项目数据：', projectForm.value);
  // 5. 触发事件，通知父组件把 visible 设为 false（关闭弹窗）
  emit('update:visible', false); 
};

const handleCancel = () => {
  // 同样触发事件，关闭弹窗
  emit('update:visible', false); 
};
</script>

<style scoped>
.add-project-card {
  padding: 20px;
}
.form-item {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}
.form-label {
  margin-bottom: 6px;
  font-weight: 500;
}
.button-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.checkbox-group {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 16px; /* 每个 checkbox 之间的间距 */
  flex-wrap: wrap; /* 超过一行时自动换行，保持整齐 */
}
</style>